<template>
  <div class="messagearea-container">
    <CommentForm v-on="$listeners" />
    <div class="commentlist-container">
      <div class="comment-title">
        <h3>{{ title }}</h3>
        <h4>{{ subTitle }}</h4>
      </div>
      <div class="comment-list">
        <CommentItem v-for="item in list" :key="item.id" :commentInfo="item" />
        <div v-show="isListLoding" class="loading-container">
          <img src="@/assets/loading.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommentForm from "./CommentForm.vue";
import CommentItem from "../CommentItem";
export default {
  name: "MessageArea",
  components: {
    CommentForm,
    CommentItem,
  },
  props: {
    title: {
      type: String,
      default: "评论列表",
    },
    subTitle: {
      type: String,
      default: "(共 0 条评论)",
    },
    list: {
      type: Array,
      default: () => [],
    },
    isListLoding: {
      type: Boolean,
      default: false,
    },
  },

  methods: {},
};
</script>

<style scoped lang="less">
.messagearea-container {
  width: 100%;
  .comment-title {
    display: flex;
    gap: 12px;
  }
  .loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
  }
}
</style>
